<template>
	<view class="not-login">
		<template v-if="place == 'bottom'">
			<view class="bottom-login fboxRow Xcenter" :style="{bottom: bottom}" v-show="_show && inShow">
				<image class="bg" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/bg-login.png" mode=""></image>
				<view class="con fboxRow Ycenter font30">
					登录<text class="font36 fwb mark">本无名片</text>查看更多人脉
					<view class="btn fboxRow Ycenter Xcenter bg-linear font30" @click="goPage">去登录</view>
					<view class="close" @click="closeLogin"><u-icon name="close" color="#ACB4C7"></u-icon></view>
				</view>
			</view>
		</template>
		<template v-if="place == 'center'">
			<view class="center-login fboxCol Ycenter " :style="{bottom: bottom}" v-show="_show && inShow">
				<view class="close fboxRow Xend" @click="closeLogin"><u-icon name="close" color="#6B707C" size="20"></u-icon></view>
				<view class="tit mt20 font40">您还未登录</view>
				<view class="con mt20 font28 lh44 color-6B707C">请先登录后再进行操作</view>
				<image class="img" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/img-login.png" mode=""></image>
				<view class="fboxRow Ycenter mt32">
					<view class="btn fboxRow Ycenter Xcenter font30 color-E8CDA7" @click="closeLogin">暂不登录</view>
					<view class="btn fboxRow Ycenter Xcenter font30 bg-linear color-141720" @click="goPage">去登录</view>
				</view>
			</view>
		</template>	
	</view>
</template>

<script>
	export default {
		name: 'notlogin',
		props:{
			show:{
				type: Boolean,
				default: true
			},
			bottom:{ // 底部距离
				type: String,
				default: '60rpx'
			},
			position:{
				type: String,
				default: 'bottom' // bottom 底部展示，center 居中展示
			}
		},
		computed:{
			_show:{
				get(){
					return this.show
				},
				set(val){
					this.$emit('update:show',val)
				}
			},
			_bottom:{
				get(){
					return this.bottom
				},
				set(val){
					this.$emit('update:bottom',val)
				}
			},
			_position:{
				get(){
					return this.position
				},
				set(val){
					this.$emit('update:position',val)
				}
			},
		},
		data() {
			return {
				inShow: false,
				place: 'bottom'
			}
		},
		mounted(){
			if(this.position != this.place){
				this.place = this.position
			}
			// if(getApp().globalData.loginCount == 1){
			// 	this.openLogin({
			// 		show: true,
			// 		position: 'bottom'
			// 	})
			// }else{
			// 	this.closeLogin()
			// }
			this.getIsToken()
		},
		methods: {
			openLogin(data){
				this._show = data.show
				this.inShow = data.show
				this._bottom = data.bottom
				this._position = data.position
				this.place = data.position
			},
			closeLogin(){
				getApp().globalData.loginCount = 2
				this.inShow = false
				this._show = false
			},
			getIsToken(){
				const {bw_params} = getApp().getBWData(['bw_params'])
				if(bw_params.access_token){
					this.closeLogin()
				}
			},
			goPage(){
				this.closeLogin()
				this.$pageTo('/mine/mobile')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.not-login{color:var(--titleFontColor)}
	.color-E8CDA7{color: var(--selectedFontColor) ;}
	.color-141720{color: #141720 ;}
	.bg-linear{background: linear-gradient(270deg, #E8CDA8 0%, #F4E6CF 100%);}
	.bottom-login{position: fixed;left: 0; right:0; width: 750rpx; padding: 0 20rpx; z-index: 9999;}
	.bottom-login .bg{width: 710rpx;height: 152rpx;border-radius: 12rpx;box-shadow: 0rpx -6rpx 24rpx 0rpx rgba(0,0,0,0.88);}
	.bottom-login .con{ position: absolute; left:50%;top: 0; right: 0; margin: 0 0 0 -355rpx; padding: 0 44rpx; width: 710rpx;height: 152rpx; color:#1B1F28; white-space: nowrap;}
	.bottom-login .mark{color:#DBBC90;margin: 0 20rpx;}
	.bottom-login .btn{ margin-left: 20rpx; width: 180rpx;height: 58rpx;border-radius: 30rpx}
	.bottom-login .close{position: absolute;top: 16rpx;right:16rpx;}
	
	.center-login{position: fixed;top: 50%; left: 50%; margin: -394rpx 0 0 -285rpx; z-index: 9999;width: 570rpx;height: 788rpx;background: var(--viewBgColor);border-radius: 12rpx;box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.16);}
	.center-login .tit{line-height: 58rpx;}
	.center-login .close{ padding: 26rpx 28rpx 0 0; width: 570rpx;}
	.center-login .img{ margin-top: 62rpx; width: 236rpx;height: 348rpx}
	.center-login .btn{width: 246rpx;height: 76rpx;border-radius: 12rpx;border: 2rpx solid #E8CDA7;}
	.center-login .btn +.btn{margin-left: 18rpx;}
	.center-login .btn.color-E8CDA7{color:var(--contentSearchTitleColor)}
</style>
